<template>
  <aside class="sidebar">
    <ul>
      <li class="sidebar-item">
        <router-link to="/exam">考试</router-link>
      </li>
      <li class="sidebar-item">
        <router-link to="/exam-paper-management">试卷管理</router-link>
      </li>
      <li class="sidebar-item">
        <router-link to="/exam-management">考试管理</router-link>
      </li>
      <li class="sidebar-item">
        <router-link to="/grading-center">批卷中心</router-link>
      </li>
      <li class="sidebar-item">
        <router-link to="/online-invigilation">智能监考</router-link>
      </li>
      <li class="sidebar-item">
        <router-link to="/appeal-management">申述管理</router-link>
      </li>
      <li class="sidebar-item">
        <router-link to="/statistics-analysis">统计分析</router-link>
      </li>
      <li class="sidebar-item has-submenu">
        <span>考试配置</span>
        <ul class="submenu">
          <li class="submenu-item">
            <router-link to="/exam-config/business-type-config">业务类型配置</router-link>
          </li>
          <!-- 可以在这里添加更多的二级菜单项 -->
        </ul>
      </li>
      <li class="sidebar-item">
        <router-link to="/certificate-management">证书管理</router-link>
      </li>
    </ul>
  </aside>
</template>

<script>
export default {
  name: 'Sidebar',
  // 通常情况下，侧边栏不需要复杂的逻辑处理，因此不需要设置data、methods等
  // 但如果需要根据用户权限动态显示菜单项，可以在这里添加逻辑
};

</script>

<style scoped>
.sidebar {
  width: 180px; /* 根据需要调整侧边栏的宽度 */
  background-color: #ffff; /* 侧边栏背景色改为白色 */
  color: #000000; /* 侧边栏文字颜色改为黑色 */
  padding: 10px;
  height: 100%;
  box-sizing: border-box;
}

.sidebar-item {
  list-style: none; /* 移除列表项的默认样式 */
  margin-bottom: 5px; /* 每个列表项之间的间距 */
}

.sidebar-item > router-link,
.submenu-item > router-link {
  text-decoration: none; /* 移除链接的下划线 */
  color: #000000; /* 链接文字颜色 */
  display: block; /* 让链接块级显示，以便填充整个列表项的宽度 */
  padding: 10px; /* 链接的内边距 */
  border-radius: 4px; /* 链接的圆角 */
}

.sidebar-item > router-link:hover,
.submenu-item > router-link:hover {
  background-color: #425264; /* 鼠标悬停时链接的背景色 */
}

.has-submenu > ul {
  padding-left: 10px; /* 二级菜单的缩进 */
  display: none; /* 默认隐藏二级菜单 */
}

.has-submenu:hover > ul {
  display: block; /* 鼠标悬停在主菜单项上时显示二级菜单 */
}

/* 可以根据需要添加更多的样式 */
</style>
